<template>
	<view class="content">
		<view class="top">
			<view class="img">
				<image src="@/static/home/home-bg.png" mode=""></image>
			</view>
		</view>
		<CustomNav :topBgColor="topBgColor" :color="titleColor" :backColor="'#999'" :isBack="true" :custom="custom"
			:title="'投诉详情'"></CustomNav>
		<view class="bottom">
			<view class="info-item">
				<view class="title">
					<view class="title-left">
						<view class="cod">
							投诉编码：{{user.code}}
						</view>
					</view>
					<view class="title-right" v-if="user.status==3" style="color: red;" :status="user.status">
						已驳回
					</view>
					<view class="title-right" v-if="user.status==4" style="color: #1BA035;" :status="user.status">
						处理中
					</view>
					<view class="title-right" v-if="user.status==1" style="color: #FF8D02;" :status="user.status">
						待受理
					</view>
					<view class="title-right" v-if="user.status==2" style="color: #027BFF;" :status="user.status">
						已办结
					</view>
				</view>
			</view>
			<view class="info-item" v-if="user.type==1">
				<view class="title">
					<view class="title-left">
						<view class="cod">
							被投诉项目
						</view>
					</view>
				</view>
				<view class="small-title">
					项目名称：
				</view>
				<view class="project">
					{{user.projectName||'暂无'}}
				</view>
				<view class="small-title">
					建设单位名称：
				</view>
				<view class="project">
					{{user.constructionName||'暂无'}}
				</view>
				<view class="small-title">
					分包单位名称：
				</view>
				<view class="project">
					{{user.subpackageName||'暂无'}}
				</view>
				<view class="small-title">
					劳动⽤⼯地址：
				</view>
				<view class="project">
					{{user.actualLocation||'暂无'}}
				</view>
				<view class="small-title">
					详细地址：
				</view>
				<view class="project">
					{{user.address||'暂无'}}
				</view>
			</view>
			<view class="info-item" v-if="user.type==2">
				<view class="title">
					<view class="title-left">
						<view class="cod">
							被投诉单位
						</view>
					</view>
				</view>
				<view class="small-title">
					⽤⼈单位名称：
				</view>
				<view class="project">
					{{user.unitName||'暂无'}}
				</view>
				<view class="small-title">
					劳动⽤⼯地址：
				</view>
				<view class="project">
					{{user.actualLocation||'暂无'}}
				</view>
				<view class="small-title">
					详细地址：
				</view>
				<view class="project">
					{{user.address||'暂无'}}
				</view>
			</view>
			<view class="info-item">
				<view class="title">
					<view class="title-left">
						<view class="cod">
							被投诉⼈信息
						</view>
					</view>
				</view>
				<view class="small-title">
					姓名：
				</view>
				<view class="project">
					{{user.salaryName||'暂无'}}
				</view>
				<view class="small-title">
					⼿机号：
				</view>
				<view class="project">
					{{user.salaryMobile||'暂无'}}
				</view>
				<view class="small-title">
					是否签署合同：
				</view>
				<view class="project" v-if="user.isContract==1">
					是
				</view>
				<view class="project" v-else-if="user.isContract==2">
					否
				</view>
				<view class="project" v-else>
					暂无
				</view>
			</view>
			<view class="info-item">
				<view class="title">
					<view class="title-left">
						<view class="cod">
							⽋薪信息
						</view>
					</view>
				</view>
				<view class="small-title">
					涉及⽋薪⼈数：
				</view>
				<view class="project">
					{{user.salaryCount||'暂无'}}
				</view>
				<view class="small-title">
					涉及⽋薪⾦额：
				</view>
				<view class="project">
					{{user.salaryAmount||'暂无'}}
				</view>
				<view class="small-title">
					⽋薪发⽣时间：
				</view>
				<view class="project">
					{{user.salaryTime||'暂无'}}
				</view>
				<view class="small-title">
					⽋薪基本情况摘要：
				</view>
				<view class="project">
					{{user.information||'暂无'}}
				</view>
			</view>

		</view>
		<view v-if="displayChoose" class="choose-block">
			<view class="choose-content">
				<view class="choose">
					<view class="choose-item">
						<view class="title">办理</view>
						<view class="name">请选择：</view>
						<view class="select-item">
							<!-- <view :key="item.id" v-for="(item,index) in list" class="select-list"
								@click="changeMenuSelected(item)" :class="form.selectedList.includes(item)?'active':''">
								{{item.name}}
							</view> -->
							<view @click="form.status=item.id" v-for="(item,index) in list" :key="item.id"
								:class="form.status==item.id?'active':''" class="select-list">
								{{item.name}}
							</view>
						</view>
						<view class="name">备注：</view>
						<template v-if="form.status==2">
							<textarea v-model="form.remark" placeholder="请简述您的办理结果..." class="form_crl"></textarea>
						</template>
						<template v-if="form.status==3">
							<textarea v-model="form.rejectRemark" placeholder="请简述您的办理结果..."
								class="form_crl"></textarea>
						</template>
						<template v-if="form.status==4">
							<textarea v-model="form.handleRemark" placeholder="请简述您的办理结果..."
								class="form_crl"></textarea>
						</template>


					</view>
					<view class="btn-item">
						<view class="btn3" @click="close">关闭</view>
						<template v-if="user.processedId">
							<view class="btn2" @click="closeItem" v-if="user.processedId==user.adminId">提交</view>
						</template>
						<template v-else>
							<view class="btn2" @click="closeItem">提交</view>
						</template>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getCustomNavData,
		showToast
	} from '@/util/util.js'
	import {
		examineComplaintApi,
		selectDetailApi
	} from '@/api/mine.js'
	import {
		multipleChoiceChange
	} from '@/util/util.js'
	import {
		validate
	} from '@/util/validate.js'
	import {
		getStorage
	} from '@/util/auth.js';
	export default {
		data() {
			return {
				id: 1,
				custom: null,
				topBgColor: 'rgba(0,0,0,0)',
				titleColor: '#fff',
				fairActive: 1,
				user: {
					code: '',
					status: 1,
					type: 1,
					projectName: '',
					constructionName: '',
					subpackageName: '',
					actualLocation: '',
					address: '',
					unitName: '',
					actualLocation: '',
					salaryName: '',
					salaryMobile: '',
					isContract: 1,
					salaryCount: '',
					salaryAmount: '',
					salaryTime: '',
					information: ''
				},
				displayChoose: false,
				list: [{
						id: 4,
						name: '处理中'
					}, {
						id: 2,
						name: '已办结'
					},
					{
						id: 3,
						name: '驳回'
					}
				],

				max: 1,
				handle: [],
				form: {
					remark: '',
					handleRemark: '',
					rejectRemark: '',
					status: 1,
				},
				rules: {
					selectedList: {
						name: '状态',
						required: true
					}
				}
			}
		},
		onPageScroll(e) {
			if (e.scrollTop >= 50) {
				this.topBgColor = '#117DFF';
			} else {
				this.topBgColor = 'rgba(0,0,0,0)';
			}
		},
		methods: {
			modalTap() {
				uni.showModal({
					title: '审核备注',
					content: this.user.examineRemark,
					showCancel: false,
					confirmText: '确定'
				})
			},
			openItem() {
				this.displayChoose = true
			},
			close() {
				this.displayChoose = false
			},
			closeItem() {
				if (validate(this.form, this.rules)) {
					uni.showLoading({
						title: '办理中',
						mask: true
					});
					examineComplaintApi({
						id: this.id,
						status: this.form.status,
						remark: this.form.remark,
						handleRemark: this.form.handleRemark,
						rejectRemark: this.form.rejectRemark,
					}).then((res) => {
						uni.hideLoading()
						this.displayChoose = false
						this.getSelectDetailApi()
					})
				}
			},
			changeMenuSelected(item) {
				multipleChoiceChange(this.form.selectedList, item, this.max)
				this.handle = multipleChoiceChange(this.handle, item)
				this.status = item.id
			},
			getSelectDetailApi() {
				selectDetailApi({
					id: this.id
				}).then((res) => {
					this.user = res
					console.log(this.user)
					console.log(999999999999)
					this.form.remark = res.remark
					this.form.rejectRemark = res.rejectRemark
					this.form.handleRemark = res.handleRemark
					this.form.status = res.status
				})
			},
		},
		mounted() {
			this.custom = getCustomNavData();
			this.getSelectDetailApi()
		},
		onLoad(e) {
			this.id = e.id;
			// this.status = e.status
			// this.remark = e.remark
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		width: 100%;
		height: 100vh;
		background-color: #F6F6F6;

		.btn {
			width: 270rpx;
			height: 80rpx;
			border-radius: 40rpx;
			color: #fff;
			display: flex;
			justify-content: center;
			align-items: center;
			margin: 30rpx auto;
			background-color: #157DFA;
		}

		.top {
			position: relative;
			width: 100%;
			height: 500rpx;

			.img {
				width: 100%;
				height: 120%;

				image {
					width: 100%;
					height: 100%;
					z-index: -1;
				}
			}


		}

		.bottom {
			position: relative;
			width: 100%;
			border-radius: 40rpx;
			padding: 30rpx;
			box-sizing: border-box;
			background-color: #F6F6F6;
			border-radius: 45rpx 45rpx 0 0;
			z-index: 99;
			margin-top: -35rpx;

			.info-item1 {
				width: 100%;
				padding: 30rpx;
				margin: 0 auto 30rpx;
				box-sizing: border-box;
				border-radius: 30rpx;
				background-color: #fff;

				.tab {
					width: 100%;
					height: 80rpx;
					display: flex;
					margin-top: 20rpx;
					justify-content: space-between;

					.all {
						//margin: 0 40rpx;

						.line {
							margin: 20rpx auto;
							width: 60rpx;
							height: 20rpx;
							background-color: #0F7DFF;
							border-radius: 30rpx;
						}
					}

					.all.active {
						color: #0F7DFF;
					}
				}

				.title {
					display: flex;
					justify-content: space-between;

					.title-left {
						display: flex;

						.cod {
							color: #000;
							font-weight: 900;
							font-size: 35rpx;
						}

						.copy-content {
							background-color: #D9EBFF;
							border-radius: 35rpx;
							display: flex;
							width: 130rpx;
							height: 50rpx;
							justify-content: center;
							align-items: center;
							padding-right: 20rpx;
							margin-left: 10rpx;

							.icon {
								width: 40rpx;
								height: 40rpx;
								margin-left: 20rpx;

								image {
									width: 100%;
									height: 100%;
								}
							}

							.copy {}
						}


					}



					.title-right {
						display: flex;

						.title-right1 {
							width: 51rpx;
							height: 46rpx;
							margin-bottom: 7rpx;

							image {
								width: 100%;
								height: 100%;
							}
						}

					}
				}
			}

			.info-item {
				// position: absolute;
				// bottom: 40rpx;
				// left: 30rpx;
				// display: flex;
				// flex-direction: column;
				// align-items: center;
				// align-items: center;
				width: 100%;
				// height: 155rpx;
				padding: 30rpx;
				box-sizing: border-box;
				border-radius: 30rpx;
				background-color: #fff;
				margin-bottom: 30rpx;

				.tab {
					width: 100%;
					height: 80rpx;
					display: flex;
					margin-top: 20rpx;

					// justify-content: ;
					.all {
						margin: 0 24rpx;

						.line {
							margin: 20rpx auto;
							width: 60rpx;
							height: 20rpx;
							background-color: #0F7DFF;
							border-radius: 30rpx;
						}
					}

					.all.active {
						color: #0F7DFF;
					}
				}

				.string {
					width: 100%;
					height: 5rpx;
					background-color: #F7F7F7;
				}

				.title {
					display: flex;
					justify-content: space-between;

					.title-left {
						display: flex;

						.cod {
							color: #000;
							font-weight: 900;
							font-size: 35rpx;
						}

						.copy-content {
							background-color: #D9EBFF;
							border-radius: 35rpx;
							display: flex;
							width: 130rpx;
							height: 50rpx;
							justify-content: center;
							align-items: center;
							padding-right: 20rpx;
							margin-left: 10rpx;

							.icon {
								width: 40rpx;
								height: 40rpx;
								margin-left: 20rpx;

								image {
									width: 100%;
									height: 100%;
								}
							}

							.copy {}
						}


					}



					.title-right {}
				}

				.small-title {
					margin: 20rpx 0;
					color: #767676;
				}

				.project {
					margin: 20rpx 0;
					font-weight: 900;

				}
			}

		}

		.choose-block {
			position: fixed;
			left: 0;
			top: 0;
			background: rgba(0, 0, 0, 0.2);
			z-index: 999;
			width: 100vw;
			height: 100vh;

			.choose-content {
				width: 80%;
				height: auto;
				background: #fff;
				z-index: 9999;
				position: fixed;
				transform: translate(-50%, 0%);
				left: 50%;
				bottom: 28%;
				display: flex;
				flex-direction: column;
				box-shadow: 0 0 10px 0px #dadada;
				border-radius: 30rpx;

				.choose {
					display: flex;
					flex-direction: column;
					background-color: #fff;
					border-radius: 30rpx;

					.choose-item {
						display: flex;
						flex-direction: column;
						padding: 30rpx;

						.title {
							width: 100%;
							text-align: center;
							margin: 20rpx auto;
							padding-bottom: 40rpx;
							border-bottom: 1px solid #dadada;
						}

						.select-item {
							display: flex;

							.select-list {
								background-color: #DCE7FB;
								color: #157DFA;
								padding: 6rpx 20rpx;
								border-radius: 40rpx;
								margin-right: 30rpx;
								width: 100;
								margin-left: 30rpx;
								display: flex;
								justify-content: center;
								align-items: center;
								font-size: 28rpx;
								height: 50rpx;
								border-radius: 40rpx;
								margin-top: 20rpx;
								overflow: hidden;
								text-overflow: ellipsis;
								white-space: nowrap
							}

							.select-list.active {
								background-color: #157DFA;
								color: #fff;
							}
						}

						.name {
							margin-top: 20rpx;
						}

						.form_crl {
							width: calc(100% - 60rpx);
							height: 200rpx;
							border-radius: 30rpx;
							background-color: #EEEEEE;
							padding: 30rpx;
							margin-top: 30rpx;
						}
					}

					.btn-item {
						display: flex;
						justify-content: center;
						align-items: center;
						margin-bottom: 40rpx;

						.btn3 {
							border-radius: 40rpx;
							width: 260rpx;
							height: 80rpx;
							display: flex;
							justify-content: center;
							align-items: center;
							color: #157DFA;
							border: 1px solid #157DFA;
							margin-right: 30rpx;
						}

						.btn2 {
							border-radius: 40rpx;
							width: 260rpx;
							height: 80rpx;
							display: flex;
							justify-content: center;
							align-items: center;
							background-color: #157DFA;
							color: #fff;
						}
					}
				}

				.btn1 {
					margin-top: 50rpx;
					height: 60rpx;
					width: 300rpx;
					border-radius: 20rpx;
					margin-bottom: 30rpx;
				}
			}
		}
	}
</style>